<template>
    <div>
      <!-- <h1>{{ article.title }}</h1>
      <p>{{ article.content }}</p> -->
      <button v-if="isLoggedIn" @click="goToEvaluate">评价</button>
      <button v-else @click="goToLogin">请先登录</button>
      <div v-for="evaluation in evaluations" :key="evaluation.id">
        <p>{{ evaluation.content }}</p>
        <p>评价类型: {{ evaluation.evaluation_type }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  const article = ref({});
  const evaluations = ref([]);
  const isLoggedIn = ref(true);  // 假设为登录状态，实际需根据登录逻辑修改
  
  const articleId = router.currentRoute.value.params.article_id;
  
  const fetchArticle = async () => {
    try {
      const response = await axios.get(`/articles/${articleId}/`);
      article.value = response.data;
    } catch (error) {
      console.error('获取文章详情失败', error);
    }
  };
  
  const fetchEvaluations = async () => {
    try {
      const response = await axios.get(`/articles/${articleId}/evaluations/`);
      evaluations.value = response.data;
    } catch (error) {
      console.error('获取评价失败', error);
    }
  };
  
  const goToEvaluate = (articleId) => {
    router.push({ name:'evaluate',params:{articleId:articleId}});
  };
  
  const goToLogin = () => {
    router.push('/login');
  };
  
  onMounted(() => {
    fetchArticle();
    fetchEvaluations();
  });
  </script>